<template>
    <div>
        <el-card class="my-20px">
            <filterComponent v-model:filter-data="filterData" @doSearch="handleSearch" />
        </el-card>
        <statisticsComponent class="mt-16px" ref="statisticsRef" :query-data="query" />
        <div class="flex mt-16px gap-16px">
            <chartSalaryType title="发薪方式统计" ref="chartSalaryTypeRef" class="flex-1" :query-data="query" />
            <chartSaleTrend ref="chartSaleTrendRef" class="flex-1" :query-data="query" />
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, onActivated } from 'vue'
import { throttle } from 'lodash'

import statisticsComponent from './components/statisticsComponent.vue'
import chartSalaryType from '../components/chartSalaryType.vue'
import chartSaleTrend from '../components/chartSaleTrend.vue'
import { getdepartmentapi } from '@/api/api.ts'
import { getDealList, getDeptList, getSalesmanList, getProductList } from '@/api/clients/signClient.ts'

const statisticsRef = ref(null)

const filterData = ref({
    list: {
        deptId: {
            name: '所属分组',
            prop: 'deptId',
            value: '',
            placeholder: '请选择所属分组',
            type: 'selectDept',
            options: [],
            defaultAttrs: {
                label: 'deptName',
                value: 'deptId'
            },
            handleFocus: (item) => {
                // if (item.options?.length) return
                // getDeptList({
                //     type: 1
                // }).then(res => {
                //     item.options = res
                // })
            },
            handleChange: (item) => {
                filterData.value.list.salesId.value = ''
                filterData.value.list.salesId.options = []
            }
        },
        salesId: {
            name: '成员',
            clearOption: true,
            prop: 'saleId',
            value: '',
            placeholder: '请选择成员',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'saleName',
                value: 'saleId'
            },
            handleFocus: (item) => {
                const value = filterData.value.list.deptId.value
                if (!value) {
                    ElMessage.warning({
                        message: '请先选择所属部门'
                    })
                    return
                }
                if (item.options?.length) return
                getSalesmanList({
                    auditStatus: 1,
                    deptId: value
                }).then(res => {
                    item.options = res
                })
            }
        },
        // searchValue: {
        //     name: '搜索',
        //     prop: 'keywords',
        //     value: '',
        //     placeholder: '请输入客户名称',
        //     type: 'input',
        //     inputType: 'text',
        //     handleFocus: (item) => {

        //     },
        //     handleChange: (item) => {

        //     },
        //     handleInput: (item) => {

        //     }
        // },
    },
    buttonList: [
        // {
        //     icon: 'Plus',
        //     name: '导出',
        //     click: () => {
        //         console.log('导出');
        //     }
        // }
    ]
})

const query = ref({})

const createQuery = () => {
    const query = {}
    for (const key in filterData.value.list) {
        query[filterData.value.list[key].prop] = filterData.value.list[key].value
    }
    return query
}

const handleSearch = () => {
    query.value = createQuery()
    setTimeout(() => {
        statisticsRef.value.getData()
        statisticsRef.value.getOtherData()
        chartSalaryTypeRef.value.getData()
        chartSaleTrendRef.value.getData()
    }, 0)
}

const chartSalaryTypeRef = ref(null)
const chartSaleTrendRef = ref(null)

// window.addEventListener('resize', throttle(() => {
// chartSalaryTypeRef.value.resize()
// chartSaleTrendRef.value.resize()
// }, 200), false)

onMounted(() => {
    query.value = createQuery()
})
onActivated(() => {
    query.value = createQuery()
})

</script>
<style lang="scss" scoped></style>